<template>
    <!-- 数字输入框 -->
    <el-input :disabled="disabled" @blur="onBlurChange($event)" v-model="number" :placeholder="placeholder">
        <template slot="append">
            <slot name="append"></slot>
        </template>

    </el-input>
</template>
<script>
export default {
    props: {
        value: {
            type: [Number, String],
            default: "",
        },
        placeholder: {
            type: String,
            default: "请输入",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    model: {
        prop: "value",
        event: "change",
    },
    data () {
        return {
            number: this.value,
        };
    },
    watch: {
        value: {
            handler (newValue) {
                this.number = newValue || "";
            },
            immediate: true,
        },
    },
    methods: {
        onBlurChange (event) {
            if (isNaN(event.currentTarget.value * 1)) {
                this.$set(this, "number", "");
                this.$message.warning("请输入数字");
                return;
            }
            this.$emit("change", event.currentTarget.value);
        },
    },
};
</script>
